<script setup>
import CatalogService from "../../stores/CatalogService";

let tableData = ref([]);
const router = useRouter();

const init = (async ()=>{
  const [err, res] = await CatalogService.promise_process(CatalogService.getCategories());
  if(err){
    console.log(err)
    ElMessage({
      message: '请求服务器失败',
      type: 'error',
    })
  }
  if(res){
    tableData.value = res.data;
  }
})

const toProduct = ( (categoryId)=>{
  router.push({
    path:`/catalog/`+categoryId+`/products`,
    params: {
      categoryId:categoryId
    }
  })
})

onMounted(()=>{
  init()
})

</script>

<template>
  <top />
  <div id="Main">
    <div id="BackLink">
      <router-link to="/home">Return to Main Menu</router-link>
    </div>
    <div id="Catalog">
      <h2 style="text-align: center ;padding-top: 80px">Categories</h2>

      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="categoryId" label="Category ID" align="center">

            <template v-slot="scope">
              <div class="el-button" style="color: deepskyblue" @click="toProduct(scope.row.categoryId)">
                {{ scope.row.categoryId }}
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="name" label="Name" align="center"></el-table-column>
        </el-table>
      </el-card>

    </div>
  </div>


  <bottom />
</template>

<style scoped>
#Main{
  /*border: solid red;*/
  padding: 10px;
  width: 80vw;
  height: 75vh;
}
#BackLink{
  position: relative;
  border-top: solid blue;
  border-bottom: solid blue;
  width: 20%;
  height: 50px;
  float: right;
  /*以下3个令文字处于div块正中央，webkit兼容Chrome*/
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}
el-table{
  position:relative;
  float: bottom;
  border: solid red;
  bottom: 10%;
  margin-top: 1000px;
}
</style>
